// pages/anim/mp-anim2/mp-anim2.js

// 滚动驱动的动画 https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html
// 另外发现SourceTree默认不支持强推的可视化操作，思考一下这也是个比较好的保护措施保留该设置，使用git 命令行强推，或者可以参考https://www.jianshu.com/p/030e09e65e2c开启
Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: wx.getSystemInfoSync().statusBarHeight,
    left: wx.getSystemInfoSync().windowWidth - 17,
    menuList: [{
      title: '海底捞（xxx）',
      distance: Math.floor(Math.random() * 1000)
    },
    {
      title: '北京烤鸭',
      distance: Math.floor(Math.random() * 1000)
    },
    {
      title: '东北饺子（xxx）',
      distance: Math.floor(Math.random() * 1000)
    },
    {
      title: '粤式茶点（xxx）',
      distance: Math.floor(Math.random() * 1000)
    },]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },


  onBack() {
    wx.navigateBack()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 展示时计算向左滑动距离-menu组件的
    if (this._lastScrollLeft > 210 * this.data.menuList.length - wx.getSystemInfoSync().windowWidth) {
      this.setData({
        scrollLeft: 210 * this.data.menuList.length - wx.getSystemInfoSync().windowWidth,
      })
    }
    this._animate()
  },
  // 动效
  _animate() {
    wx.createSelectorQuery().select('#scroller').fields({
      scrollOffset: true,
      size: true,
    }, (res) => {
      this.animate('.avatar', [{
        // borderRadius: '0', 改成一直圆形
        borderRadius: '50%',
        borderColor: 'red',
        transform: 'scale(1) translateY(-20px)',
        offset: 0, // 都不设置效果一样，每理解具体作用
      }, {
        // borderRadius: '25%',
        borderRadius: '50%',
        borderColor: 'blue',
        transform: 'scale(.65) translateY(-20px)',
        offset: .5,
      }, {
        // borderRadius: '50%',
        border: 'dotted yellow 10px', // 关键帧不完全支持border属性,宽度不支持
        // borderColor: 'pink',
        transform: `scale(.3) translateY(-60px)`,
        offset: 1
      }], 3000, {
        scrollSource: '#scroller', // 指定滚动元素的选择器（只支持 scroll-view），该元素滚动时会驱动动画的进度
        timeRange: 5000, // 起始和结束的滚动范围映射的时间长度，该时间可用于与关键帧动画里的时间 (duration) 相匹配（一样就好或比关键帧大，如果小关键整动效只执行这里的时间会出现异显），单位 ms
        startScrollOffset: 0, // 指定开始驱动动画进度的滚动偏移量，单位 px即滚动了对应(150px)位移后才开始.avatar的动效
        endScrollOffset: 150, // 指定停止驱动动画进度的滚动偏移量，单位 px;即滚动了对应(150px)位移后停止.avatar的动效
      })

      this.animate('.nickname', [{
        transform: 'translateY(0)',
      }, {
        transform: `translateY(${-44 - this.data.statusBarHeight}px)`,
      }], 1000, {
        scrollSource: '#scroller',
        timeRange: 1000,
        startScrollOffset: 0,
        endScrollOffset: 200,
      })

      this.animate('.search_input', [{
        opacity: '0',
        width: '0%',
      }, {
        opacity: '1',
        width: '100%',
      }], 1000, {
        scrollSource: '#scroller',
        timeRange: 1000,
        // startScrollOffset: 120,
        startScrollOffset: 0,
        endScrollOffset: 252
      })

      this.animate('.search_icon', [{
        right: '0',
        transform: 'scale(1)',
      }, {
        right: (wx.getSystemInfoSync().windowWidth * .5 - 20) + 'px',
        transform: 'scale(.6)',
      }], 1000, {
        scrollSource: '#scroller',
        timeRange: 1000,
        // startScrollOffset: 140,
        startScrollOffset: 0,
        endScrollOffset: 252,
      })
    }).exec()

    wx.createSelectorQuery().select("#scroller2").fields({
      scrollOffset: true,
      size: true,
    }, (res) => {
      // 绑定滚动元素
      const scrollTimeline = {
        scrollSource: '#scroller2',
        orientation: 'horizontal',
        timeRange: 1000,
        startScrollOffset: (210 * this.data.menuList.length - res.width) + 20,
        endScrollOffset: res.scrollWidth - res.width,
      }
      this.animate('#transform', [{
        offset: 0,
        width: '0px',
      }, {
        offset: 1,
        width: '30px',
      }], 1000, scrollTimeline)
    }).exec()
  },
  // 滑动事件监听-横向scroll-view 菜单的
  scroll(e) {
    if (e.detail.scrollLeft + wx.getSystemInfoSync().windowWidth + 3 >= e.detail.scrollWidth) {
      if (e.detail.deltaX < 0 && !this._active) {
        this._active = true
        this.setData({ wording: '释放跳转' })
        wx.vibrateShort()
      } else if (e.detail.deltaX > 0) {
        this._active = false
        this.setData({ wording: '查看更多' })
      }
    } else {
      this._active = false
    }
    this._lastScrollLeft = e.detail.scrollLeft
    clearTimeout(this._timer)
  },
  // 触摸抬起事件,横向滚动的菜单的。
  touchend() {
    clearTimeout(this._timer)
    if (this._active) {
      wx.navigateTo({
        url: '/second/index',
      })
      this._active = false
    } else if (this._lastScrollLeft > 210 * this.data.menuList.length - wx.getSystemInfoSync().windowWidth) {
      this.setData({
        scrollLeft: 210 * this.data.menuList.length - wx.getSystemInfoSync().windowWidth,
      })
    }
  },

  clickAvatar() {
    wx.navigateBack()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})